<template>
  <!-- 企业经营范围新增 -->
  <el-dialog
    v-dialogDrag
    :close-on-click-modal="false"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    class="dialogStyleSmall"
  >
    <div style="text-align:left">
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级名称" prop="parentId">
              <treeselect
                v-model="formData.parentId"
                :show-count="false"
                :options="equOptions"
                size="medium"
                placeholder="选择上级名称"
                :normalizer="normalizer"
                :disabled="isParentIdDisabled"
                no-options-text="暂无上级名称"
                clearable
                @select="selectParentId"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="" prop="businessName">
              <label slot="label" v-html="`名&emsp;&emsp;称`" />
              <el-input v-model="formData.businessName" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="orderNum">
              <label slot="label" v-html="`排&emsp;&emsp;序`" />
              <el-input-number v-model="formData.orderNum" size="medium" style="width: 100%" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :lg="24">
            <el-form-item label="" prop="remark">
              <template slot="label">
                <span class="labelTitle" v-html="`备&emsp;&emsp;注`" />
              </template>
              <el-input v-model="formData.remark" clearable type="textarea" :rows="3" :maxlength="500" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" type="primary" @click="submitForm('form')">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
/** 页面接口 start*/
import { listBusinessScope, addBusinessScope, editBusinessScope, detailBusinessScope, getMaxNum } from '@/api/superviseBaseInfo/natureOfBusiness/index'
/** 页面接口 end*/
// 菜单下拉树用的的方法和样式
import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'AddDialog',
  components: { treeselect },
  data() {
    return {
      normalizer(node) {
        // 去掉children=[]的children属性
        if (node.children === null || node.children === 'null') {
          delete node.children
        }
        return {
          id: node.id,
          label: node.businessName,
          children: node.children
        }
      },
      /** 新增弹框 start */
      // 上级部门是否禁用
      isParentIdDisabled: false,
      // 弹出的对话框的标题
      dialogTitle: '',
      // 对话框是否弹出显示
      dialogVisible: false,
      // 名称树
      equOptions: [],
      // 添加字段定义
      formData: {
        id: '',
        parentId: null, // 父级id
        businessName: '', // 名称
        orderNum: '', // 排序
        remark: ''// 备注
      },
      rules: {
        businessName: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '备注不能为空', trigger: 'blur' }
        ]
      }
      /** 新增弹框 end */
    }
  },
  methods: {
    // 获取上级菜单
    async getList() {
      this.tableLoading = true
      const { data } = await listBusinessScope(this.filters)
      this.equOptions = data
    },
    selectParentId(node) {
      const parentId = node.id
      this.formData.parentId = parentId
      this.getMaxNum(parentId)
    },
    /** 新增 start */
    handleAdd(title, id, multip) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.emptyForm()
      this.getList()
      if (id) {
        this.getDetailById(id)
      } else {
        const { parentId, id } = multip
        this.formData.parentId = id // 新增父级回显
        const numId = !parentId ? 0 : id // 查询排序的父级id
        this.getMaxNum(numId)
      }
    },
    // 获取最大排序
    async getMaxNum(parentId) {
      const { data } = await getMaxNum(parentId)
      this.formData.orderNum = data
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailBusinessScope(id)
      this.formData = { ...data }
      if (data.parentId === '0') {
        this.formData.parentId = null
      }
    },
    // 添加弹框取消
    cancel() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
    },
    // 添加/编辑页面确定按钮
    submitForm(formData) {
      this.$refs[formData].validate(async valid => {
        if (valid) {
          if (this.formData.id) {
            await editBusinessScope(this.formData)
            this.msgSuccess('修改成功!')
          } else {
            await addBusinessScope(this.formData)
            this.msgSuccess('新增成功!')
          }
          this.$parent.getList()
          this.dialogVisible = false
        }
      })
    },
    // 重置表单
    emptyForm() {
      this.resetForm('form')
      this.formData.id = ''
      this.formData.parentId = null
    }
    /** 新增 end */
  }
}
</script>

